<template>
  <BasePageTable
    :table-data="tableData"
    :table-columns-data="tableColumnsData"
    style="height: 500px"
  >
    <template #getFile="{ row, index }">
      <el-image
        style="width: 100px; height: 100px"
        :src="value.url"
        v-for="(value, index) in row.getFile || []"
        :key="index"
        :preview-src-list="[value.url]"
      />
    </template>
    <template #installFile="{ row, index }">
      <el-image
        style="width: 100px; height: 100px"
        :src="value.url"
        v-for="(value, index) in row.installFile || []"
        :key="index"
        :preview-src-list="[value.url]"
      />
    </template>
  </BasePageTable>
</template>
<script setup lang="ts">
import BasePageTable from "@/components/BasePageTable/index.vue";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});
const tableColumnsData = ref([
  {
    prop: "categoryText",
    label: "品类",
    showOverflowTooltip: true,
    width: 200,
  },
  {
    prop: "brandName",
    label: "品牌",
    showOverflowTooltip: true,
    customSlot: "brandName",
    width: 200,
  },
  {
    prop: "installMan",
    label: "安装工人",
    showOverflowTooltip: true,
    width: 200,
  },
  {
    prop: "installManMobile",
    label: "安装工人电话",
    showOverflowTooltip: true,
    width: 200,
  },
  {
    prop: "getFile",
    label: "到货照片",
    showOverflowTooltip: true,
    customSlot: "getFile",
    width: 300,
  },
  {
    prop: "getTime",
    label: "到货时间",
    showOverflowTooltip: true,
    width: 200,
  },
  {
    prop: "installFile",
    label: "安装照片",
    showOverflowTooltip: true,
    customSlot: "installFile",
    width: 300,
  },
  {
    prop: "installTime",
    label: "安装时间",
    showOverflowTooltip: true,
    width: 200,
  },
]);

const tableData = computed(() => {
  const houseConstructionMaterialInstallVO = props.data.houseConstructionMaterialInstallVO || [];
  return houseConstructionMaterialInstallVO.map((item) => {
    return {
      ...item,
      getFile: JSON.parse(item.getFile || "[]"),
      installFile: JSON.parse(item.installFile || "[]"),
    };
  });
});
</script>
